<template>
  <div>
    <div class="goods_title">
      <div>{{ attr.productSelect.storeName }}</div>
      <div>价格{{ attr.productSelect.price }}</div>
      <div>库存{{ attr.productSelect.stock }}</div>
    </div>
    <div class="sku_main">
      <div class="sku_img">
        <img :src="attr.productSelect.image" alt="" />
      </div>
      <div class="sku_seclete">
        <div v-for="(item1, index1) in attr.productAttr" :key="index1">
          <div class="sku_title">{{ item1.attrName }} {{ item1.index }}</div>
          <div class="sku_tag">
            <div
              v-for="(item2, index2) in item1.attrValue"
              :key="index2"
              :class="item1.index === item2.attr ? 'active' : ''"
              @click="tagClick(index1, index2)"
            >
              {{ item2.attr }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 30px;">
      <el-input-number
        v-model="attr.productSelect.cart_num"
        @change="handleChange"
        :min="1"
        label="描述文字"
      ></el-input-number>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    attr: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    tagClick(idx1, idx2) {
      this.$emit("tagClick", {
        idx1,
        idx2
      });
      console.log(this.getCheckedValue());

      this.$emit("ChangeAttr", this.getCheckedValue().join(","));
    },
    //获取被选中属性；
    getCheckedValue: function() {
      let productAttr = this.attr.productAttr;
      let value = [];
      productAttr.forEach((item1, idx1) => {
        item1.attrValues.forEach((item2, idx2) => {
          if (productAttr[idx1].index === productAttr[idx1].attrValues[idx2]) {
            value.push(productAttr[idx1].attrValues[idx2]);
          }
        });
      });
      return value;
    },
    handleChange(value) {
      this.$emit("changeNum", value);
    }
  }
};
</script>

<style lang="less" scoped>
.goods_title {
  display: flex;
  > div {
    margin-right: 30px;
  }
}
.sku_main {
  display: flex;
  margin-top: 30px;
}
.sku_img {
  width: 100px;
  height: 100px;
  margin-right: 30px;
  img {
    width: 100%;
    height: 100%;
  }
}
.sku_seclete {
  .sku_title {
    font-weight: bold;
    font-size: 12px;
  }
  .sku_tag {
    display: flex;
    > div {
      background-color: #000;
      color: #fff;
      margin-right: 10px;
      padding: 5px 10px;
    }
    .active {
      background-color: red;
      color: #fff;
    }
  }
}
</style>
